<template>
  <div class="loading-class">
    <div class="spinner">
      <span class="text-info">{{text}}</span>
      <div class="rect1" :style="{'background':rectcolor}"></div>
      <div class="rect2" :style="{'background':rectcolor}"></div>
      <div class="rect3" :style="{'background':rectcolor}"></div>
      <div class="rect4" :style="{'background':rectcolor}"></div>
      <div class="rect5" :style="{'background':rectcolor}"></div>
    </div>
  </div>
</template>

<script>

export default {
  name:'LoadingRect',
  props:{
    text:{
      type:String,
      default:'等待业务中'
    },
    rectcolor:{
      type:String,
      default:'#5d8fe9'
    }
  },
  data() {
    return {
    }
  },
  created() {
    
  },
  methods: {
  },
}
</script>

<style lang="stylus" scoped>
.spinner {
  text-align: center;
}
.spinner>span{
  font-size:.3rem;
  color:#fff;
}
.spinner > div {
  height: .2rem;
  width: .1rem;
  border-radius: 50%;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 30%, 50% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

// .spinner>div{
//   background-color:bg-color;
// }
.spinner .text-info{
  color:#f66;
}
.spinner .text-info:hover{
  display:inline-block;
  padding-bottom:.04rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff3300' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
  background-size: .2rem auto;
  animation:waveMove 1s infinite linear;
}
@keyframes waveMove{
  from { background-position: 0 100%; }
  to { background-position:-0.2rem 100%; }
}
</style>